<template>
	<view>
		<view class="head">
			{{status_text}}
		</view>
		<!-- 地址 -->
		<view class="address">
			<view class="address-top">
				<view class="name">{{datadetail.usr_name}}</view>
				<view class="phone">{{datadetail.phone}}</view>
			</view>
			<view class="address-bottom">{{datadetail.address}}</view>
		</view>
		<!-- 商品详情 -->
		<view class="detail">
			<!-- <view class="detail-row1">
				<view class="head-img"><image src="https://teacher-obj.oss-cn-beijing.aliyuncs.com/headportrait/201908/13/e89843afeb1235c32a3c9e3f17aced55110.jpg" mode="aspectFit"></image></view>
				<view>平板店</view>
				<i class="iconfont iconfanhui"></i>
			</view> -->
			<view class="item-row2" v-for="(val,k) in datadetail.sublist" :key="k">
				<view class="item-row2-img" :style="'background: url('+val.images_url+') center center; background-size: cover;'" >
					<!-- <image src="https://teacher-obj.oss-cn-beijing.aliyuncs.com/headportrait/201908/13/e89843afeb1235c32a3c9e3f17aced55110.jpg" mode="aspectFit"></image> -->
				</view>
				<view class="item-text">
					<view class="item-text-title">{{val.goods_name}}</view>
					
					<text class="item-text-spec">{{val.specs_name}}</text>
					<view class="item-text-num">
						<view class="money"><text>{{val.score}}</text>积分+￥{{val.price}}</view>
						<view class="num">X{{val.number}}</view>
					</view>
				</view>
			</view>
			<view class="detail-row3">
				<view>
					<text>商品总价</text>
					<text>{{datadetail.total_score}}积分+￥{{datadetail.total_price}}</text>
				</view>
				<view>
					<text>运费</text>
					<text>￥0.00</text>
				</view>
				<view>
					<text>实付款</text>
					<text class="detail-row3-text">{{datadetail.total_score}}积分+￥{{datadetail.total_price}}</text>
				</view>
			</view>
		</view>
		<!-- 订单详情 -->
		<view class="orderdtext">
			<view>
			订单信息
			</view>
			<view class="orderdtext-num">
				<view>订单编号：{{datadetail.order_no}}</view>
				<view class="copy" @click="copy">复制</view>
			</view>
			<view>创建时间：{{datadetail.create_time}}</view>
			<view>成交时间：{{datadetail.update_time}}</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_no: '',
				datadetail:''
			}
		},
		onLoad(e) {
			this.order_no=e.order_no;
			this.getdetail();
		},
		methods: {
			getdetail:function() {
				this.$sapi.apiPost('v1/' + this.market_id + '/mobile/order/info/'+this.order_no).then(res => {
					if(res.data.code==200){
						this.datadetail = res.data.data;
						}
					
				});
			},
			copy:function(){
				uni.setClipboardData({
				    data: this.datadetail.order_no,
				    success: function () {
				       
				    }
				});
			}
		},
		computed:{
			status_text:function(){
				var text='';
				switch (this.datadetail.order_status){
					case 0:
						text ="未支付";
						break;
					case 1:
						text ="已支付";
						break;
					case 2:
						text ="已发货";
						break;
					case 3:
						text ="已完成";
						break;
					case 99:
						text ="已退款";
						break;
				}
				return text
			}
		}
	}
</script>

<style lang="scss">
	page{
	background: #F7F7F7;
	}
	.head{
		background-color: #0F6752;
		width: 100%;
		height: 142upx;
		color: #FFFFFF;
		font-size: 42upx;
		font-weight: 500;
		line-height: 142upx;
		padding-left: 70upx;
	}
	
	.address{
		padding: 25upx;
		background-color: #FFFFFF;
		.address-top{
			display: flex;
			justify-content: flex-start;
			line-height: 45upx;
			.name{
				color: #333333;
				font-size: 34upx;
				margin-right: 30upx;
			}
			.phone{
				font-size: 30upx;
				color: #A8A8A8;
			}
		}
		.address-bottom{
			font-size: 34upx;
			color: #333333;
			line-height: 45upx;
		}
	}
	
	
	.detail{
		background-color: #FFFFFF;
		margin-top: 20upx;
		.detail-row1{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 20upx;
			.head-img{
				width: 88upx;
				height: 88upx;
				border-radius: 50%;
				border: 1upx solid #FAFAFA;
				image{
					border-radius: 50%;
					width: 100%;
					height: 100%;
				}
			}
		}
	.item-row2{
		display: flex;
		justify-content: flex-start;
		padding:20upx;
		border-bottom: 1upx solid #F7F7F7;
		.item-row2-img{
			width: 128upx;
			height: 128upx;
			border: 2upx solid #A8A8A8;
			border-radius: 8upx;
			margin-right: 20upx;
			image{
				width: 100%;
				height: 100%;
				
			}
		}
		.item-text{
			width: 100%;
			.item-text-title{
				color: #2D3440;
				font-size: 28upx;
			}
			.item-text-spec{
				width: auto;
				background-color: #DADFE6;
				color: #FFFFFF;
				padding:5upx 10upx;
				border-radius: 15upx;
			}
			.item-text-num{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.money{
					color: #FF0032;
					font-size: 28upx;
					text{
						font-size: 40upx;
					}
					}
				.num{
					color: #2D3440;
					font-size: 20upx;
					}
			}
		}
	}
		.detail-row3{
			padding:15upx 20upx;
			view{
				display: flex;
				justify-content: space-between;
				text{
					font-size: 24upx;
					color: #333333;
				}
				.detail-row3-text{
					color: #FF0000;
				}
			}
			
		}
	}
	
	.orderdtext{
		background-color: #FFFFFF;
		margin-top: 20upx;
		padding: 20upx;
		view{
			font-size: 24upx;
			line-height: 50upx;
			color: #333333;
		}
		.orderdtext-num{
			display: flex;
			justify-content: space-between;
			.copy{
				margin-right: 10upx;
			}
		}
	}
	
</style>
